<template>
  <el-container>
    <el-header>
      <el-menu router mode="horizontal" :default-active="$route.path">
        <el-menu-item index="/" style="font-size:1.2em;color:#000;">RookieWiki</el-menu-item>
        <el-submenu index="mobile" v-if="ifmobile" >
          <template slot="title">菜单</template>
          <el-menu-item index="/articles"> 文章列表</el-menu-item>
          <el-menu-item index="/help"> 帮助</el-menu-item>
          <el-menu-item><a href='/admin'> 管理</a></el-menu-item>
          <el-menu-item index="/about"> 关于</el-menu-item>
          <el-menu-item index="/new"> 添加</el-menu-item>
        </el-submenu>
        <el-menu-item index="/articles" v-if="!ifmobile" class="el-icon-menu"> 文章列表</el-menu-item>
        <el-menu-item index="/article/1" v-if="!ifmobile" class='el-icon-question'> 帮助</el-menu-item>
        <el-menu-item index="/admin" @click="admin()" v-if="!ifmobile" class="el-icon-warning"> 管理</el-menu-item>
        <el-menu-item index="/about" v-if="!ifmobile" class='el-icon-info'> 关于</el-menu-item>
        <el-menu-item index="/new" v-if="!ifmobile" class='el-icon-circle-plus' style="float:right;"> 添加</el-menu-item>
        <!--<el-menu-item index="/login" v-if="!ifmobile" style="float:right;">登录</el-menu-item>-->
      </el-menu>
    </el-header>
    <el-main>
      <el-container>
        <el-backtop style="box-shadow: 0px 0px 10px #888888;z-index:100000;" :visibility-height="50"></el-backtop>
        <router-view/>
      </el-container>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data () {
    return {
      ifmobile: window.ifmobile
    }
  },
  methods: {
    admin: function () {
      window.location = '/admin'
    }
  }
}
</script>

<style>
body,html{
  scroll-behavior: smooth;
}
.el-container{
  width: 90%;
  margin-left: 5%;
}
.heimu{
  background:#24292e;
}
.heimu:hover{
  color:#FFF;
}

.markdown-body img{
  max-height: 50vh !important;
  text-align: center;
}
.markdown-body img[alt='none']{
  height: auto !important;
  width: auto !important;
  max-height: 100% !important;
  max-width: 100% !important;
}
a{
  text-decoration:none;
  color:#409EFF;
}
a:hover{
  color:rgb(0, 81, 255);
}
</style>
